<template>
    <el-dialog
        title="商家认证信息"
        :visible.sync="dialogVisible"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="500px"
    >
        <div>
            <div class="seller">
                <div class="left">公司名称：</div>
                <div class="right">{{ sellerInfo.companyName }}</div>
            </div>
            <div class="seller">
                <div class="left">统一社会信用代码：</div>
                <div class="right">{{ sellerInfo.companyCode }}</div>
            </div>
            <div class="seller">
                <div class="left">联系人：</div>
                <div class="right">{{ sellerInfo.contactName }}</div>
            </div>
            <div class="seller">
                <div class="left">身份证号：</div>
                <div class="right">
                    {{ sellerInfo.contactIdCard }}
                    <el-link @click="lookSellerIdCard(sellerInfo.id)"  v-permission="['user_seller_look_id_card']" v-show="lookIdCardBtn">
                        <i class="el-icon-view el-icon--right"></i> 查看
                    </el-link>
                </div>
            </div>
            <div class="seller">
                <div class="left">联系人手机号：</div>
                <div class="right">{{ sellerInfo.contactMobile }}</div>
            </div>
            <div class="seller">
                <div class="left">认证资料：</div>
                <div class="right">
                    <el-image
                        v-for="item in sellerInfo.companyBusinessLicense"
                        style="width: 60px; height: 60px; margin-right:10px; "
                        :src="item.url"
                        fit="fit"
                        :preview-src-list="srcList"
                    />
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import {sellerApi} from '@/api/user/sellerApi'
import permission from '@/directive/permission/index.js'

export default {
    name: 'UserSellerDetail',
    components: {},
    data() {
        return {
            sellerInfo: {
                id:'',
                companyName: '',
                companyCode: '',
                contactName: '',
                contactIdCard: '',
                contactMobile: '',
                companyBusinessLicense: ''
            },

            dialogVisible: false,
            srcList: [],
            lookIdCardBtn:true
        }
    },
    directives: { permission },
    created() {
    },
    methods: {
        // 显示组件
        showDetail(data) {
            this.srcList = []
            this.sellerInfo = Object.assign({}, data)
            this.sellerInfo.companyBusinessLicense.forEach(item => {
                this.srcList.push(item.url)
            })

            this.dialogVisible = true
            this.lookIdCardBtn = true
        },
        // 提交表单
        lookSellerIdCard(sellerId) {
            sellerApi.lookSellerIdCard(sellerId)
                .then((response) => {
                    this.sellerInfo.contactIdCard = response
                    this.lookIdCardBtn = false
                })
        }
    }
}
</script>

<style>
.seller {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.seller .left {
    flex: 8;
    padding-right: 10px;
}

.seller .right {
    flex: 16;
    padding-bottom: 10px;
}

.seller .right image {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}
</style>
